<!-- filename: frontend/src/components/Header/Header.vue -->
<template>
  <view class="header-container">
    <view class="header-content">
      <!-- 左侧 Logo/标题 -->
      <view class="logo-area" @click="goHome">
        <!-- 您可以在这里放一个 Logo 图片 -->
         <text v-if="props.title" class="page-title">{{ props.title }}</text>
        <text v-else class="logo-text">Albert Music</text>
      </view>

      <!-- 右侧导航和用户区 -->
      <view class="nav-area">
        <!-- 登录后显示 -->
        <template v-if="authStore.isLoggedIn">
          <view class="nav-item" @click="navigateTo('/pages/upload/upload')">上传</view>
          <view class="nav-item" @click="navigateTo('/pages/about/about')">关于</view>
          <view class="user-avatar" @click="goProfile">
            <!-- 优先显示头像图片 -->
            <image 
              v-if="authStore.user && authStore.user.avatar_url"
              :src="authStore.user.avatar_url" 
              class="avatar-image"
              mode="aspectFill"
              />
              <!-- 如果没有图片，则显示首字母 -->
              <text v-else>{{ authStore.user.username.charAt(0).toUpperCase() }}</text>
          </view>
        </template>
        
        <!-- 未登录时显示 -->
        <template v-else>
          <view class="nav-item" @click="navigateTo('/pages/about/about')">关于</view>
          <view class="nav-item login-btn" @click="openAuthModal">注册 / 登录</view>
        </template>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useAuthStore } from '@/store/auth';

// 我们将通过 emit 事件来通知父组件(App.vue)打开弹窗
const emit = defineEmits(['open-auth-modal']);

const authStore = useAuthStore();

const goHome = () => {
  uni.switchTab({ url: '/pages/index/index' });
};

const goProfile = () => {
  uni.switchTab({
    url: '/pages/profile/profile'
  });
};

const navigateTo = (url) => {
  // 简单判断是 Tab 页面还是普通页面
  if (['/pages/index/index', '/pages/category/category'].includes(url)) {
    uni.switchTab({ url });
  } else {
    uni.navigateTo({ url });
  }
};

const props = defineProps({
  title: {
    type: String,
    default: ''
  }
});

const openAuthModal = () => {
  emit('open-auth-modal');
};
</script>

<style scoped lang="scss">
.header-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  z-index: 1000;
  display: flex;
  justify-content: center;
}

.header-content {
  width: 100%;
  max-width: 800px; /* 与主体内容宽度保持一致 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.logo-area {
  cursor: pointer;
}

.logo-text {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.nav-area {
  display: flex;
  align-items: center;
  gap: 25px;
}

.nav-item {
  font-size: 16px;
  color: #555;
  cursor: pointer;
  transition: color 0.2s;
  
  &:hover {
    color: #007aff;
  }
}

.login-btn {
  padding: 6px 12px;
  border: 1px solid #007aff;
  border-radius: 6px;
  color: #007aff;
  
  &:hover {
    background-color: #f0f8ff;
  }
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #007aff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  overflow: hidden; /* 新增：确保图片不超出圆形边界 */  
}

.avatar-image {
  width: 100%;
  height: 100%;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
</style>